<template>
    <div class="nav_breadcrumb">
        <div class="nav_breadcrumb_container">
            <div class="nav_breadcrumb_title">
                {{ tabsModelValue.replace(/_/g, ' ') }}
            </div>
            <n-breadcrumb>
                <n-breadcrumb-item @click="goToHome">
                    Home
                </n-breadcrumb-item>
                <n-breadcrumb-item>
                    {{ tabsModelValue.replace(/_/g, ' ') }}
                </n-breadcrumb-item>
            </n-breadcrumb>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { NBreadcrumb, NBreadcrumbItem } from "naive-ui"

const props = defineProps({
    tabsModelValue: {
        type: String,
        default: ''
    }
})

const router = useRouter()

const goToHome = () => {
    router.push('/')
}
</script>

<style lang='less'>
.nav_breadcrumb {
    background-color: #212529;
    width: 100%;
    margin: 0 auto;
    color: white;
    font-weight: bold;

    .nav_breadcrumb_container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;

        .nav_breadcrumb_title {
            font-size: 35px;
        }

        .n-breadcrumb {
            .n-breadcrumb-item__link {
                color: white;
            }

            .n-breadcrumb-item:last-child .n-breadcrumb-item__link {
                color: #777777;
                font-weight: bold;
            }
        }
    }
}
</style>